import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:high_help_apps/common/values/colors.dart';
import 'package:high_help_apps/common/widgets/common/awesome_tab_bar.dart';
import 'package:high_help_apps/common/widgets/common/common_text_field.dart';
import 'package:high_help_apps/common/widgets/common/light_menu/light_menu.dart';
import 'package:high_help_apps/common/widgets/common/light_menu/light_menu_introduction.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:high_help_apps/common/widgets/common/little_card.dart';
import 'search_logic.dart';
import 'search_state.dart';

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  final SearchLogic logic = Get.put(SearchLogic());
  final SearchState state = Get.find<SearchLogic>().state;

  @override
  Widget build(BuildContext context) {
    return _buildSearchBody();
  }

  Widget _buildSearchBody() => ListView(
        children: [
          _buildHeaderSearchBox(),
          _buildSearchHotBox(),
          _buildRecommendArticle()
        ],
      );

  /// 构建搜索页最上方的搜索框
  Widget _buildHeaderSearchBox() => CommonTextField(
        prefixIcon: Icon(Icons.search, color: AppColors.lightTextColor1),
        placeholder: '搜索',
        unselectBorderSide:
            BorderSide(color: AppColors.lightTextColor1, width: 0.5),
        selectBorderSide:
            BorderSide(color: AppColors.primaryElement, width: 1.0),
        backgroundColor: AppColors.lightTextColor3,
        inputTextColor: AppColors.lightTextColor,
        placeholderColor: AppColors.lightTextColor1,
        floatButtonBackgroundColor: Theme.of(context).primaryColor,
        floatButtonChild: Icon(
          Icons.menu_outlined,
          color: Colors.white,
        ),
        onPressed: (String value) {
          print('pressed search!');
        },
      );

  /// 构建搜索框下方的热门搜索
  Widget _buildSearchHotBox() => Container(
        padding: EdgeInsets.all(10.0.r),
        child: Column(
          children: [
            LightMenu(titleColor: Colors.orange, title: '热门搜索', ligtMenuData: [
              LightMenuIntroduction(title: "嗨助校园", onTap: () {}),
              LightMenuIntroduction(title: "嗨助校园", onTap: () {}),
              LightMenuIntroduction(title: "嗨助校园", onTap: () {}),
              LightMenuIntroduction(title: "嗨助校园", onTap: () {}),
              LightMenuIntroduction(title: "嗨助校园", onTap: () {}),
              LightMenuIntroduction(title: "嗨助校园", onTap: () {}),
              LightMenuIntroduction(title: "嗨助校园", onTap: () {}),
              LightMenuIntroduction(title: "嗨助校园", onTap: () {}),
              LightMenuIntroduction(title: "嗨助校园", onTap: () {}),
              LightMenuIntroduction(title: "嗨助校园", onTap: () {}),
            ]),
          ],
        ),
      );

  /// 构建热门搜索下方的推荐文章
  Widget _buildRecommendArticle() => Card(
      margin: EdgeInsets.symmetric(horizontal: 10.r, vertical: 5.r),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadiusDirectional.circular(10.0.r)),
      elevation: 0,
      child: AwesomeTabBar(
          tabMaterialColor: Colors.white,
          tabIndicatorColor: Colors.orange,
          enableLabelColor: Colors.orange,
          tabBarViewList: logic.state.newsTitleList
              .map(
                (e) => Container(
                  child: Center(
                    child: Text('$e'),
                  ),
                ),
              )
              .toList(),
          tabBarList: logic.state.newsTitleList
              .map((e) => Padding(
                    padding: EdgeInsets.all(7.r),
                    child: Text(
                      '$e',
                    ),
                  ))
              .toList()));

  @override
  void dispose() {
    Get.delete<SearchLogic>();
    super.dispose();
  }
}
